<template>
  <div class="content">
    <div class="topcon">
      <h3>销售进度</h3>
      <div class="top-center">
        <div class="top1">
          <!-- <div class="top_item"></div> -->
          <div class="top_item" v-for="(item,index) in leftList" :key="index">
            <chart :name="'left'+index" :data="item"></chart>
          </div>
          <!-- <div class="top_item"><chart name='al2' :data="echart"></chart></div> -->
        </div>
        <div class="top1 top2">
          <chart name="all" v-if="allstattus" :data="allobj"></chart>
        </div>
        <div class="top1">
          <!-- <div class="top_item"></div> -->
          <div class="top_item" v-for="(item,index) in rightList" :key="index">
            <chart :name="'right'+index" :data="item"></chart>
          </div>
        </div>
      </div>
    </div>
    <div class="topcon">
      <h3>各组销售额占比</h3>
      <div class="top-center">
        <chart name="text" v-if="allstattus" :data="echart1"></chart>
      </div>
    </div>
    <div class="topcon">
      <!-- <h3>资源锁定成功率分析</h3> -->
      <div class="top-center">
        <chart name="text1" v-if="success_point" :data="zztu"></chart>
      </div>
    </div>
    <div class="btoms">
      <div class="btomitem">
        <chart name="text12" v-if="chancestatus" :data="chance"></chart>
      </div>
      <div class="btomitem">
        <chart name="svag" v-if="success_points" :data="pointObj"></chart>
      </div>
    </div>
  </div>
</template>
<script>
import chart from "./echarts";
import {
  getbusiness_tracking,
  getresource_lock,
  getsales_opportunity,
  conversion_success
} from "../../../api/decision.js";
export default {
  components: {
    chart
  },
  data() {
    return {
      leftList: [],
      rightList: [],
      chancestatus: false,
      success_point:false,
      pointObj:{},
      chance: {
        title: {
          text: "销售机会分析"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["成交金额", "机会金额"],
          top:'bottom'
        },
        grid: {
          left: "3%",
          right: "4%",
          // bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: []
        },
        yAxis: [
          {
            name: "金额(万元)",
            type: "value"
          }
        ],
        series: [
          {
            name: "成交金额",
            type: "bar",

            stack: "销售机会",
            data: []
          },
          {
            name: "机会金额",
            type: "bar",
            stack: "销售机会",
            data: []
          }
        ]
      },
      //
      success_points: false,
      zztu: {
        title: {
          text: "资源锁定成功率分析"
        },
        xAxis: {
          type: "category",
          data: []
        },
        yAxis: {
          type: "value",
          max: 100,
          min: 0
        },
        series: {
          data: [],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(220, 220, 220, 0.8)"
          }
        }
      },
      lenList:[],
      echart1: {
        title: {
          // text: '某站点用户访问来源',
          // subtext: '纯属虚构',
          // left: 'center'
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: []
        },
        series: 
          {
            name: "组别",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              // { value: 335, name: "直接访问" },
              // { value: 310, name: "邮件营销" },
              // { value: 234, name: "联盟广告" },
              // { value: 135, name: "视频广告" },
              // { value: 1548, name: "搜索引擎" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        
      },
      echart: {},
      allstattus: false,
      allobj: {
        // 标题组件，包含主标题和副标题
        title: {
          show: true,
          // text: "执行任务",
          x: "center",
          textStyle: {
            fontSize: "15",
            color: "green",
            fontWeight: "bold"
          }
        },
        //  提示框组件
        tooltip: {
          //是否显示提示框组件，包括提示框浮层和 axisPointe
          show: false,
          // 触发类型: item:数据项触发，axis：坐标轴触发
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // // 图例
        // legend: {
        //     orient: 'vertical',
        //     x: 'left',
        //     data:['完成率']
        // },

        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: {
          // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
          name: "任务进度",
          type: "pie",
          // 饼图的半径，数组的第一项是内半径，第二项是外半径
          radius: ["50%", "70%"],
          // 是否启用防止标签重叠策略，默认开启
          avoidLabelOverlap: false,
          hoverAnimation: false,
          // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              // 数据值
              value: 50,
              // 数据项名称
              name: "总体完成率",
              //该数据项是否被选中
              backgroundColor: "#fff",
              selected: false,
              // 单个扇区的标签配置
              label: {
                normal: {
                  // 是显示标签
                  show: true,
                  position: "center",
                  fontSize: 14,
                  // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                  formatter: "{b}\n{d}%"
                }
              }
            },
            {
              value: 100,
              label: {
                normal: {
                  show: true
                }
              }
            }
          ]
        }
      }
    };
  },
  created() {
    this.getschedule();
    this.getconversion_success();

    this.getlock();
    this.getsales();
  },
  methods: {
    getconversion_success() {
      conversion_success().then(res => {
        if (res.code == 200) {
          var obj = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999"
                }
              }
            },
             grid: {
          left: "3%",
          right: "4%",
          // bottom: "3%",
          containLabel: true
        },
            title: {
              text: "资源锁定金额及成功转化率分析"
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ["line", "bar"] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ["资源锁定金额", "成功率"],
              top:'bottom'
            },
            xAxis: 
              {
                type: "category",
                data: [],
                axisPointer: {
                  type: "shadow"
                }
              }
            ,
            yAxis: [
              {
                type: "value",
                name: "资源锁定金额",
               
                axisLabel: {
                  formatter: "{value}"
                }
              },
              {
                type: "value",
                name: "成功率",
              
                axisLabel: {
                  formatter: "{value}%"
                }
              }
            ],
            series: [
              {
                name: "资源锁定金额",
                type: "bar",
                data: [
            
                ]
              },

              {
                name: "成功率",
                type: "line",
                yAxisIndex: 1,
                data: [
                 
                ]
              }
            ]
          };
          res.data.forEach(element => {
            obj.series[0].data.push(element.opportunity_money)
            obj.series[1].data.push(element.success_point)
            obj.xAxis.data.push(element.name)
          });
          console.log(obj)
          this.pointObj=obj
          this.success_points=true
          
        }
      });
    },
    getsales() {
      getsales_opportunity().then(res => {
        if (res.code == 200) {
          res.data.forEach(element => {
            this.chance.xAxis.data.push(element.name);
            this.chance.series[0].data.push(element.success_money);
            this.chance.series[1].data.push(element.opportunity_money);
          });
          this.chancestatus = true;
        }
      });
    },
    getlock() {
      getresource_lock().then(res => {
        if (res.code == 200) {
          res.data.forEach(element => {
            this.zztu.xAxis.data.push(element.name);
            this.zztu.series.data.push(element.success_point);
          });
          this.success_point = true;
        }
      });
    },
    getschedule() {
      getbusiness_tracking().then(res => {
        if (res.code == 200) {
          this.allobj.series.data[0].value = res.data.total.all_sales;
          this.allobj.series.data[1].value =
            res.data.total.total_num - res.data.total.all_sales;
          this.allstattus = true;
          this.lenList=res.data.sale_doors
          this.lenList.forEach(element => {
          this.echart1.legend.data.push(element.get_door.name)
          this.echart1.series.data.push({name:element.get_door.name,value:element.sales})
            
          });
          var len = res.data.sale_doors.length;
          //分成左右两个数组
          var left = res.data.sale_doors.slice(0, Math.ceil(len / 2));
          var right = res.data.sale_doors.slice(Math.ceil(len / 2), len);
          var leftwarp = [];
          var rightwarp = [];

          left.forEach(element => {
            leftwarp.push({
              // 标题组件，包含主标题和副标题
              title: {
                show: true,
                // text: "执行任务",
                x: "center",
                textStyle: {
                  fontSize: "15",
                  color: "green",
                  fontWeight: "bold"
                }
              },
              //  提示框组件
              tooltip: {
                //是否显示提示框组件，包括提示框浮层和 axisPointe
                show: false,
                // 触发类型: item:数据项触发，axis：坐标轴触发
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)"
              },
              // // 图例
              // legend: {
              //     orient: 'vertical',
              //     x: 'left',
              //     data:['完成率']
              // },

              // 系列列表。每个系列通过 type 决定自己的图表类型
              series: {
                // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                name: "任务进度",
                type: "pie",
                // 饼图的半径，数组的第一项是内半径，第二项是外半径
                radius: ["50%", "70%"],
                // 是否启用防止标签重叠策略，默认开启
                avoidLabelOverlap: false,
                hoverAnimation: false,
                // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: [
                  {
                    // 数据值
                    value: element.sales,
                    // 数据项名称
                    name: element.get_door.name,
                    //该数据项是否被选中
                    backgroundColor: "#fff",
                    selected: false,
                    // 单个扇区的标签配置
                    label: {
                      normal: {
                        // 是显示标签
                        show: true,
                        position: "center",
                        fontSize: 14,
                        // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                        formatter: "{b}\n{d}%"
                      }
                    }
                  },
                  {
                    value: Number(element.num) - Number(element.sales),
                    label: {
                      normal: {
                        show: true
                      }
                    }
                  }
                ]
              }
            });
          });
          right.forEach(element => {
            rightwarp.push({
              // 标题组件，包含主标题和副标题
              title: {
                show: true,
                // text: "执行任务",
                x: "center",
                textStyle: {
                  fontSize: "15",
                  color: "green",
                  fontWeight: "bold"
                }
              },
              //  提示框组件
              tooltip: {
                //是否显示提示框组件，包括提示框浮层和 axisPointe
                show: false,
                // 触发类型: item:数据项触发，axis：坐标轴触发
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)"
              },
              // // 图例
              // legend: {
              //     orient: 'vertical',
              //     x: 'left',
              //     data:['完成率']
              // },

              // 系列列表。每个系列通过 type 决定自己的图表类型
              series: {
                // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                name: "任务进度",
                type: "pie",
                // 饼图的半径，数组的第一项是内半径，第二项是外半径
                radius: ["50%", "70%"],
                // 是否启用防止标签重叠策略，默认开启
                avoidLabelOverlap: false,
                hoverAnimation: false,
                // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: [
                  {
                    // 数据值
                    value: element.sales,
                    // 数据项名称
                    name: element.get_door.name,
                    //该数据项是否被选中
                    backgroundColor: "#fff",
                    selected: false,
                    // 单个扇区的标签配置
                    label: {
                      normal: {
                        // 是显示标签
                        show: true,
                        position: "center",
                        fontSize: 14,
                        // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                        formatter: "{b}\n{d}%"
                      }
                    }
                  },
                  {
                    value: Number(element.num) - Number(element.sales),
                    label: {
                      normal: {
                        show: true
                      }
                    }
                  }
                ]
              }
            });
          });
          this.leftList = leftwarp;
          this.rightList = rightwarp;
          //  this.itemstatus=true
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.btoms {
  height: 400px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 200px;
  .btomitem {
    height: 400px;
    width: 50%;
  }
}
.topcon {
  height: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  .top-center {
    flex: 1;
    // background: red;
    display: flex;
    .top1 {
      width: 33%;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      display: flex;
      align-items: center;
      justify-content: center;
      .top_item {
        width: 50%;
        height: 50%;
        // background: blue;
      }
    }
  }
}
</style>